import React from 'react'
import PageTitle from 'component/page-title/index.jsx'
import {Link} from 'react-router-dom'
import Muntil from 'until/mm.jsx'
import Product from 'service/produce-service.jsx'
import TableList from "until/table-list/index.jsx";



const _mm=new Muntil();
const _product=new Product();

class CategoryList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            list:[],
            parentCategoryId: this.props.match.params.categoryId ||0,

        }

    }
    componentDidMount(){
        this.loadCategoryList();
    }

    componentDidUpdate(prevProps,prevState){
        let oldPath=prevProps.location.pathname,
            newPath=this.props.location.pathname,
            newId=this.props.match.params.categoryId
        if(oldPath !==newPath){
            this.setState({
                parentCategoryId:newId
            },()=>{
                this.loadCategoryList()
            })
        }
    }

    //加载品类列表
    loadCategoryList(){
        _product.getCatetgoryList(this.state.parentCategoryId).then(res=>{
            this.setState({
                list:res
            })
        },errMsg=>{
            this.setState({
                list:[]
            })
            _mm.errorTips(errMsg)
        });
    }

    //更新品类名称
    onUpdataName(categoryId,categoryName){
        let newName=window.prompt('请输入新的品类名称',categoryName)
        if(newName){
            _product.updataCategoryName({
                categoryId:categoryId,
                categoryName:newName
            }).then(res=>{
                _mm.successTip(res)
                this.loadCategoryList()
            },errMsg=>{
                _mm.errorTips(errMsg)
            })
        }

    }



    render(){
        let tableHeads=[
            {name:'品类ID',width:'15%'},
            {name:'品类名称',width:'30%'},
            {name:'操作',width:'20%'},
        ]
        let listBody= this.state.list.map((category,index)=>{
            return (
                <tr key={index}>
                    <td>{category.id}</td>
                    <td>{category.name}</td>
                    <td>
                        <a className="opear" onClick={e=>{this.onUpdataName(category.id,category.name)}}>修改名称 </a>
                        {
                            category.parentId === 0
                                ?<Link to={`/produce-category/index/${category.id}`}>查看字品类</Link> :null
                        }
                    </td>
                </tr>
            )
        })

        return(
            <div id="page-wrapper">
                <PageTitle title="品类列表">
                    <div className="page-header-right">
                        <Link to="/produce-category/add" className="btn btn-primary">
                            <i className="fa fa-plus"></i>
                            <span>添加品类</span>
                        </Link>
                    </div>
                    <div className="row">
                      <div className="col-md-12">
                          <p>父品类ID：{this.state.parentCategoryId}</p>
                      </div>
                    </div>
                </PageTitle>
                <TableList tableHeads={tableHeads}>
                    {listBody}
                </TableList>

            </div>
        )
    }

}

export default CategoryList;